<template>
	<view class="content">
		<!-- 功能列表 -->
		<view class="features">
			<view class="features-list" v-for="(item,index) in featuresList" :key="index">
				<view class="features-list-img">
					<image :src="item.img" mode="aspectFit"></image>
				</view>
				<view class="features-list-text">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<view class="login">
			<view class="login-img">
				<image src="../../static/imgs/set/tc.png" mode="aspectFit"></image>
			</view>
			<view class="login-text">
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				featuresList:[
					{
						id:1,
						img:'../../static/imgs/set/lb.png',
						text:'新消息通知'
					},
					{
						id:2,
						img:'../../static/imgs/set/ts.png',
						text:'版本更新'
					},
					{
						id:3,
						img:'../../static/imgs/set/qc.png',
						text:'清除缓存'
					},
					{
						id:4,
						img:'../../static/imgs/set/xg.png',
						text:'修改密码'
					},
					{
						id:5,
						img:'../../static/imgs/set/gy.png',
						text:'关于我们'
					},
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style scoped lang="scss">
.content{
	padding: 0 40rpx;
	box-sizing: border-box;
	
	.features{
		margin-top: 100rpx;
		
		.features-list{
			display: flex;
			gap:40rpx;
			padding: 40rpx 0;
			box-sizing: border-box;
			border-bottom: 1px solid #f1f1f1;
			align-items: center;
			
			.features-list-img{
				
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			
			.features-list-text{
				
				text{
					font-size: 32rpx;
					color: #6e7781;
				}
			}
		}
	}
	
	.login{
		margin-top: 100rpx;
		display: flex;
		gap: 40rpx;
		
		.login-img{
			
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.login-text{
			font-size: 32rpx;
			color: #209bfd;
			font-weight: 900;
		}
	}
}
</style>
